
<p>Few tips for deploy aspnet web application</p>
<p>
  For a enterprise ASP.NET web application scenarios please reference following
  documents.
</p>
<p>
  <a
    href="http://www.asp.net/web-forms/overview/deployment/web-deployment-in-the-enterprise/understanding-the-project-file"
    target="_blank"
    >Deploying Web Applications in Enterprise Scenarios</a
  >
</p>
<p>
  <a
    href="http://www.asp.net/web-forms/overview/deployment/web-deployment-in-the-enterprise/understanding-the-project-file"
    target="_blank"
    >Understanding the Project File</a
  >
</p>
<p>
  <a
    href="http://www.codeproject.com/Articles/16768/Deployment-made-simple-using-Powershell"
    target="_blank"
    >Deployment made simple using Powershell</a
  >
</p>
<p>
  During the application build or deploy if you have anything need to be include
  but not checked-in to the project, you can try following command.
</p>
<p>
  Following is example command that during the project build it will copy files
  or folder to sepecific location depend on you are on local or deploy. If you
  use powershell to write your own deployment scripts following project, csproj
  code will copy the files or folder, which you don't need to write that to
  powershell.
</p>
<pre class="language-xml"><code>&lt;Target Name="AfterBuild"&gt;
    &lt;ItemGroup&gt;
      &lt;DefinedTargetFolder Include="$(SolutionDir)\AllFilesFolder\**\*.*" /&gt;
    &lt;/ItemGroup&gt;
    &lt;!-- for local --&gt;
    &lt;Copy Condition="$(IsDesktopBuild)=='true' Or $(IsDesktopBuild)==''" SourceFiles="@(DefinedTargetFolder)" DestinationFolder="$(SolutionDir)\YourTargetFolderDuringLocalBuild\%(RecursiveDir)" /&gt;
    &lt;!-- for deploy to tfs--&gt;
    &lt;Copy Condition="$(IsDesktopBuild)=='false'" SourceFiles="@(DefinedTargetFolder)" DestinationFolder="$(OutDir)\YourTargetFolderDuringTfsMSBuildOrDeploy\%(RecursiveDir)" /&gt;   
  &lt;/Target&gt;
</code></pre>
<h3>Example.pubxml</h3>
<p>
  Following is almost same thing like previous code is doing, however it will
  use project pubxml.
</p>
<pre class="language-xml"><code>
&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003"&gt;
  &lt;PropertyGroup&gt;
    &lt;WebPublishMethod&gt;FileSystem&lt;/WebPublishMethod&gt;
    &lt;LastUsedBuildConfiguration&gt;YourConfigurationName&lt;/LastUsedBuildConfiguration&gt;
    &lt;LastUsedPlatform&gt;Any CPU&lt;/LastUsedPlatform&gt;
    &lt;SiteUrlToLaunchAfterPublish /&gt;
    &lt;LaunchSiteAfterPublish&gt;True&lt;/LaunchSiteAfterPublish&gt;
    &lt;ExcludeApp_Data&gt;False&lt;/ExcludeApp_Data&gt;
    &lt;publishUrl&gt;C:\YourLocalFolder&lt;/publishUrl&gt;
    &lt;DeleteExistingFiles&gt;False&lt;/DeleteExistingFiles&gt;
  &lt;/PropertyGroup&gt;
  &lt;Target Name="copyAdditionalFilesOrFolderForDeploy"&gt;
    &lt;ItemGroup&gt;     
      &lt;_CustomFiles Include="$(MSBuildProjectDirectory)\TargetFolder\**\*" /&gt;
      &lt;FilesForPackagingFromProject Include="%(_CustomFiles.Identity)"&gt;
        &lt;DestinationRelativePath&gt;TargetFolder\%(RecursiveDir)%(Filename)%(Extension)&lt;/DestinationRelativePath&gt;
      &lt;/FilesForPackagingFromProject&gt;
    &lt;/ItemGroup&gt;
  &lt;/Target&gt;
  &lt;PropertyGroup&gt;
    &lt;CopyAllFilesToSingleFolderForPackageDependsOn&gt;copyAdditionalFilesOrFolderForDeploy;;&lt;/CopyAllFilesToSingleFolderForPackageDependsOn&gt;
  &lt;/PropertyGroup&gt;
&lt;/Project&gt;
</code></pre>
<p>
  <a href="https://www.powershellgallery.com/packages/xFirefox/" target="_blank"
    >Powershell Gallery</a
  >
</p>
<h3>What's next?</h3>
<p>
  For deployment, should use visual studio 2015's
  <a
    href="https://blogs.msdn.microsoft.com/visualstudioalm/2014/11/17/devops-style-deployment-in-visual-studio-2015-preview-a-detailed-look/"
    target="_blank"
    >DevOps deployment tools.</a
  >
</p>


Tips About How to Deploy ASP.NET Web Application


<p>How can I use Bootstrap Sass at Visual Studio?</p>
<p>
  There're many way to achieve this, but you can just use Nuget with visual
  studio to do this.
</p>
<p>Nuget + Web Compiler</p>
<p>Use nuget to download the sass bootstrap to your web application.</p>
<p>
  <a
    href="https://www.nuget.org/packages/Twitter.Bootstrap.Sass/"
    target="_blank"
    >Twitter.Bootstrap.Sass</a
  >
</p>
<p><code> PM&gt; Install-Package Twitter.Bootstrap.Sass</code></p>
<p>
  <img
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_jzluib1ec.png"
    alt=""
    width="701"
    height="526"
  />
</p>
<p>
  Once you have installed bootstrap file to your application, you can install
  following visual studio plugin to compile the sass to css.
</p>
<p>
  &nbsp;<a
    href="https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c"
    target="_blank"
    >Web Compiler</a
  >
</p>
<p>This web compiler will compile the sass into css file for you.</p>
<p>
  <img
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_662y1ulxw.png"
    alt=""
    width="603"
    height="325"
  />
</p>


How can I use Bootstrap Sass at Visual Studio?There're many way to achieve this, but you can just use Nuget with visual studio to do this.Nuget + Web Compiler

How to Use Bootstrap SCSS at Visual Studio 2015


<h2>Useful Nuget command</h2>
<h4>
  1. Nuget is dependency management system for web development, if you use it
  you'll already familiar with following command. The first nuget command is
  install angular, second one is uninstall nuget package.
</h4>
<pre
  class="language-javascript"
><code>Install-Package angularjs -Version 1.4.6</code></pre>
<pre class="language-javascript"><code>UnInstall-Package angularjs
</code>
</pre>
<h4>
  2. Nuget is actually has more useful command, like followings. Update a
  particular package in a project to the latest version:
</h4>
<pre
  class="language-javascript"
><code>Update-Package jQuery -ProjectName MyProject</code></pre>
<p>
  This command if very useful too because it able to run all the package file
  for specific project.
</p>
<pre class="language-javascript"><code>
Update-Package -ProjectName MyProject -reinstall
</code></pre>
<h4>3. Update Project by defined nuget file</h4>
<pre class="language-javascript"><code>
Update-Package -ProjectName Pokemon.Shared -reinstall
</code>
</pre>
<pre class="language-javascript"><code>
update-package -reinstall -ignoreDependencies
</code>
</pre>
<h4>4. Install nuget package to all projects at current solution</h4>
<pre class="language-javascript">
Get-Project -All | Install-Package Autofac</pre
>
<h4
  style="
    font-family: 'Helvetica Neue', Helvetica, Arial, Helvetica, sans-serif;
    white-space: normal;
  "
>
  5. Install nuget package to certain projects at current solution
</h4>
<pre class="language-javascript">
Get-Project ProjectA,ProjectB,ProjectC | Install-Package Autofac</pre
>
<pre class="language-javascript">
Get-Project -All | Install-Package Autofac</pre
>
<p>For more command see following links</p>
<p>
  <a
    href="http://blog.nuget.org/20121231/a-quick-tutorial-on-update-package-command.html"
    target="_blank"
    >Nuget Update command</a
  >
</p>
<p>
  <a
    href="https://docs.nuget.org/consume/command-line-reference"
    target="_blank"
    >Nuget command line reference</a
  >
</p>
<p>
  <a
    href="https://docs.nuget.org/consume/package-manager-console-powershell-reference"
    target="_blank"
    >Package Manager Console Powershell Reference</a
  >
</p>
<p>
  <a
    href="https://docs.nuget.org/create/creating-and-publishing-a-package"
    target="_blank"
    >Nuget Create and Publish command</a
  >
</p>


Nuget is dependency management system for web development, if you use it you'll already familiar with following command. The firstnuget command is install angular, second one is uninstall nuget package.

List of Useful Commands for Nuget


<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_ytp13gif8.png"
    alt=""
  />
</p>
<p>
  I think I need to stop using visual studio with Node.js project, I was using
  sublime text with my node.js project with no problem, run node.js command,
  open sublime for my project was in a second.
</p>
<p>
  However when I open my node.js project with visua studio, I can hear my
  computer is&nbsp;dying. Once I open my visual studio, visual studio 2013 is
  using aroung 20-30% of my cpu and 2GB memory, also I could hear my computer
  make strage sound by the fan.
</p>
<p>
  I think the main issue with visual studio with node.js is, visual studio use
  lots of marco to loads the project files, that's might cause the problem which
  application is checking something.
</p>
<p>This issue should be fixed, if you're using Visual Studio 2017 or 2019.</p>


Stop using Visual Studio with Node.js Project

Stop Using Visual Studio 2013 with Node.js Project


<ul>
  <li>
    Install Visual Studio Team Services Extensions&nbsp;from Visual Studio Code
    Marketplace.
  </li>
  <li>Add TF Command line to Visual Studio Code&nbsp;</li>
  <ul>
    <li>
      VSC - File - Preferences&nbsp;- Settings
      <p>
        Depend on what's Visual Studio you installed on the machine, visual
        studio code's TFVC location will be different, following is an example
        for vs2015 and vs2017 for your reference.
      </p>
      <pre class="language-json"><code>
// example tf.exe location for visual studio 2015
{
    "tfvc.location": "C:\\Program Files (x86)\\Microsoft Visual Studio 14.0\\Common7\\IDE\\tf.exe",
    "tfvc.restrictWorkspace": true
}
</code></pre>
      <pre class="language-json"><code>
// example tf.exe location for visual studio 2017
{
    "tfvc.location": "C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Community\\Common7\\IDE\\CommonExtensions\\Microsoft\\TeamFoundation\\Team Explorer\\tf.exe",
    "tfvc.restrictWorkspace": true
}
</code></pre>
    </li>
    <li>
      <p>Put your own setting depend on what Visual Studio you installed.</p>
      <img
        class="img-responsive"
        src="https://d1p0mp3f1fx0hz.cloudfront.net/_dyeazvv93.png"
        alt=""
      />
    </li>
  </ul>
  <li>Login to your visual studio online and get Access Tokens from VSTS.</li>
  <ul>
    <li>
      Click Security and go to Personal access tokens and click add a new
      token.Also,&nbsp;<strong
        >Make sure you copy the token now. We don't store it and you won't be
        able to see it again.</strong
      >
    </li>
  </ul>
  <li>Open Visual Studio code and add token</li>
  <ul>
    <li>Click the Team, put the token and click enter.</li>
    <li>
      <img src="https://d1p0mp3f1fx0hz.cloudfront.net/_hqw9100fv.png" alt="" />
    </li>
  </ul>
  <li>
    Now, you should be able to connect to visual studio team service from visual
    studio code, including check-in, get the latest file check bug items.
  </li>
</ul>
<p>&nbsp;</p>
<ol>
  <li>
    <a
      href="https://github.com/Microsoft/vsts-vscode/blob/master/TFVC_README.md#quick-start"
      target="_blank"
      >TFVC Quickstart</a
    >
  </li>
  <li>
    <a
      href="https://github.com/Microsoft/vsts-vscode/blob/master/TFVC_README.md#quick-start"
      target="_blank"
      >Visual studio code TFVC support</a
    >
  </li>
  <li>
    <a
      href="https://github.com/Microsoft/vsts-vscode/blob/master/TFVC_README.md#configure-tfvc-support"
      target="_blank"
      >How to add TF command to Visual Studio Code</a
    >
  </li>
  <li>
    <a
      href="https://www.youtube.com/watch?v=t6gGfj8WOgg&amp;feature=youtu.be"
      target="_blank"
      >Video - Setup Team Services extensions for Visual Studio Code</a
    >
  </li>
  <li>
    <a
      href="https://marketplace.visualstudio.com/items?itemName=ms-vsts.team"
      target="_blank"
      >Visual Studio Team Services Extension for Visual Studio Code</a
    >
  </li>
</ol>


Use Team Foundation Version Control(TFVC) at Visual Studio Code


<p>
  If you use Xamarin at windows and want to build app for Android and iOS, you
  could use iOS simulator at your windows. However there's few software and
  setting you might have to do. I assume you're having problem at windows
  Xamarin Mac Agent and unable to connect to your mac.
</p>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_0l7ux5l96.png"
    alt=""
  />
</p>
<p>First make sure your windows have following software installed.</p>
<ul>
  <li>Window PC</li>
  <ul>
    <li>Visual Studio 2015</li>
    <li>Xamarin for Visual Studio 2015</li>
  </ul>
  <li>Mac</li>
  <ul>
    <li>Enable Remote login</li>
    <li>
      Xamarin Studio (Xamarin Mac Agent need your Mac to have Mono installed)
    </li>
  </ul>
  <li>Others</li>
  <ul>
    <li>Make sure Mac and Window are at the same network.</li>
    <li>Still can't not connect to Mac, download PuTTY to test connection</li>
    <li>
      Or check here to see xamarin error, you might found useful message when
      you can't connect to Mac. C:\Users\{Your Windows User
      Account}\AppData\Local\Xamarin\Logs\14.0
    </li>
  </ul>
</ul>
<p style="padding-left: 30px">&nbsp;</p>


Xamarin - Can't Connect to Mac From Windows with Xamarin


<h2>How to debug node.js app in visual studio.</h2>
<p>
  Scott already wrote blog in 2013 about the node.js tools for visual studio, so
  more detail information you can find at here&nbsp;<a
    href="http://www.hanselman.com/blog/IntroducingNodejsToolsForVisualStudio.aspx"
    target="_blank"
    >Introducing node.js Tools for Visual Studio</a
  >. This blog shows how to run debug in practise.&nbsp;
</p>
<h4>
  First, you need to install node.js tools for your visual studio, go to
  following page to download, and assume you already installed node.js and
  visual studio.
</h4>
<p>
  <a
    href="https://github.com/Microsoft/nodejstools/releases/tag/v1.1"
    target="_blank"
    >NodejsTools For Visual Studio</a
  >
</p>
<h4>Next, and the final step, let's debug.</h4>
<p>
  Open your node.js project, and click browser (following example, click Google
  Chrome).
</p>
<p><img src="https://d1p0mp3f1fx0hz.cloudfront.net/_7ajncpu6n.png" alt="" /></p>
<p>
  nodejs tools will use node.exe to open another port for start debug your
  node.js app.
</p>
<p><img src="https://d1p0mp3f1fx0hz.cloudfront.net/_eblqr33je.png" alt="" /></p>
<h4>
  There you go, you are done. You can use visual studio's debug tools now.
</h4>
<p><img src="https://d1p0mp3f1fx0hz.cloudfront.net/_02klxb24j.png" alt="" /></p>
<p>
  More info about node.js debug at visual studio, please reference following.
</p>
<ul>
  <li>
    <a
      href="https://github.com/Microsoft/nodejstools/wiki/Advanced-Debugging"
      target="_blank"
      >Advanced Debugging</a
    >
  </li>
  <li>
    <a
      href="https://github.com/Microsoft/nodejstools/releases/tag/v1.1"
      target="_blank"
      >nodejstools dowloand</a
    >
  </li>
</ul>


How to debug node.js app in visual studio.

How to Debug Node.js Code with Visual Studio


<p>
  The following blog shows how to run the AngularJS unit test just like how you
  run C# unit test, so basically, you'll run your AngularJS at the visual studio
  test explorer window.
</p>
<p>
  <img
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_y17k78x5n.png"
    alt=""
    width="886"
    height="379"
  />
</p>
<h2>Install packages</h2>
<p>
  You'll need to install the following two packages,
  <code>AngularJS.Core</code> and <code>JasmineTest</code>.
</p>
<pre class="language-javascript"><code>install-package AngularJS.Core
</code></pre>
<pre class="language-javascript"><code>install-package JasmineTest
</code></pre>
<h2>Create AngularJS app module</h2>
<pre class="language-javascript"><code>
var app = angular.module('app', []);
</code></pre>
<h2>Create AngularJS controller</h2>
<p>Just create a simple controller with score.test is test.</p>
<pre class="language-javascript"><code>
app.controller('myController', function ($scope) {
    $scope.test = 'test';
});
</code></pre>
<h2>Write Javascript Unittest</h2>
<p>Following this, we'll create a Javascript unit test code by Jasmine.</p>
<pre
  class="language-javascript"
><code>/// &lt;reference path="{{path to the javascript}}"/&gt;
describe('testAngular ', function () {
    //initialize Angular
    beforeEach(module('app'));
    var scope;
    beforeEach(inject(function ($controller, $rootScope) {
        scope = $rootScope.$new();
        var ctrl = $controller('myController', { $scope: scope });
    }));

    it('test scope is test', function () {
        expect(scope.test).toBe('test');
    });
});
</code></pre>
<h2>Get Chutzpah Test Adapter</h2>
<p>
  <a
    href="https://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1fe"
    target="_blank"
    rel="noopener"
    >Chutzpah Test Adapter for the Test Explorer</a
  >
</p>
<p>
  Once you install Chutzpah you can just run the unit tests like C# unit tests.
</p>


Enable javascript unit test at Visual Studio Test Explorer window

Javascript Unit Test With Jasmine, Angular and Chutzpah with Visual Studio


<ol>
  <li>
    show Line numbers
    <p>
      <img
        src="http://res.cloudinary.com/dmwrakaup/image/upload/v1410456001/ytb59vhhzy644mchscqc.png"
        alt=""
      />
    </p>
  </li>
  <li>
    Custom Compare, Merge Tools
    <p>
      <img
        src="https://d1p0mp3f1fx0hz.cloudfront.net/_41ebsw07a.png"
        alt=""
        width="499"
        height="492"
      />
    </p>
    <p>
      <img src="https://d1p0mp3f1fx0hz.cloudfront.net/_7in72xeli.png" alt="" />
    </p>
    <p>/x /e /ub /wl /dl %6 /dr %7 %1 %2</p>
    <p>
      <img
        src="http://res.cloudinary.com/dmwrakaup/image/upload/v1410456513/knga2cpzueagt0slr1u1.png"
        alt=""
      />
    </p>
    <p>/x /e /ub /wl /dl %6 /dr %7 %1 %2 %4</p>
  </li>
  <li>
    Track Active Item in Solution Explorer
    <p>
      Check this whenever you open a class file, solution exploer will point to
      that file, so you know what location is that file.
    </p>
    <p>
      Check the item under, Tools - Options - Projects and Solutions - General
    </p>
    <p>Check the "Track Active Item in solution Explorer</p>
    <p>
      <img
        src="http://res.cloudinary.com/dmwrakaup/image/upload/v1410465518/migfdwme9x3oew5zra7o.png"
        alt=""
      />
    </p>
  </li>
  <li>
    Turn on IntelliSense Options
    <p>
      <img src="https://d1p0mp3f1fx0hz.cloudfront.net/_tg4e1dpa9.png" alt="" />
    </p>
  </li>
</ol>


Few Visual Studio 2013 Helpful Settings


<p class="MsoNormal">
  Turn off the Browser Link features (Visual Studio 2013).
</p>
<p class="MsoNormal">
  You might already know, but if don&rsquo;t and noticed following request
  <strong>poll?transport= [GET] </strong>is annoy, which keep fire request at
  your browser.&nbsp;
</p>
<p><img src="https://d1p0mp3f1fx0hz.cloudfront.net/_cuhszgcan.png" alt="" /></p>
<p class="MsoNormal">&nbsp;</p>
<p class="MsoNormal">
  You can Turn off the Enable Browser Link from visual studio 2013 as following.
</p>
<p>
  <img
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_4oa3hm9x3.png"
    alt=""
  />&nbsp;
</p>
<p class="MsoNormal">
  <span style="font-size: 10pt; mso-bidi-font-size: 11pt"
    >Browser Link is turn on by default, and suppose to test multi
    browser&rsquo;s UI layout,(for instance, if you add
    &lt;h1&gt;Hello&lt;/h1&gt;) and want to check how is look like at all
    browser, however doesn&rsquo;t work always, you want to setup project visual
    studio-like.</span
  >
</p>
<p class="MsoNormal">
  <span style="font-size: 10pt; mso-bidi-font-size: 11pt"
    >For how to use Browser Link see following.</span
  >
</p>
<p class="MsoNormal">
  http://blogs.msdn.com/b/webdev/archive/2013/06/28/browser-link-feature-in-visual-studio-preview-2013.aspx
</p>
<p>&nbsp;</p>
<p class="MsoNormal">&nbsp;</p>


Turn off the Browser Link features (Visual Studio 2013).You might already know, but if don’t and noticed following request poll?transport= [GET] is annoy, which keep fire request at yourbrowser.

Category Visual Studio Code